<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const routes = [
      {
        path: '/dashBoard',
        name: '仪表盘',
        component: 'DashBoard'
      },
      {
        path: '/itemLists',
        name: '商品列表',
        component: 'ItemLists',
        children: [
          {
            path: '/itemAdd',
            name: '增加商品',
            component: 'ItemAdd'
          },
          {
            path: '/itemUpdate',
            name: '更新商品',
            component: 'ItemUpdate'
          }
        ]
      },

      {
        path: '/cateLists',
        name: '商品分类',
        component: 'CateLists'
      },
      {
        path: '/userInfo',
        name: '个人中心',
        component: 'UserInfo'
      },
      {
        path: '/setting',
        name: '设置',
        component: 'SettingPage'
      }
    ]
    const loadViews = (name) => {
      return () => import("_views/"+name)
    }

    function filterRoute(routes){
      const _routes = [];
      routes.forEach(route => {
        route.component = loadViews(route.component);
        if (route.children&&route.children.length) {
          route.children = filterRoute(route.children)
        }
        _routes.push(route)
      })

      return _routes
    }
    console.log(filterRoute(routes));
  </script>
</body>

</html>